<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <div>
              <div class="basic-content">
                <!-- <div class="form-group">
                  <h4 class="card-title">基础信息</h4>
                </div> -->
                <div class="form-group">
                  <label for="productname">账号名称</label>
                  <b-form-input
                    for="text"
                    v-model="basicContent.name"
                    placeholder="账号名称"
                  ></b-form-input>
                </div>
                <div class="row">
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="price">自媒体平台</label>
                      <multiselect
                        v-model="value1"
                        :options="options1"
                        placeholder="请选择自媒体平台"
                      ></multiselect>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="manufacturerbrand">账号ID</label>
                      <b-form-input
                        for="text"
                        v-model="basicContent.accountID"
                        placeholder="账号ID"
                      ></b-form-input>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="price">账号地址</label>
                      <b-form-input
                        for="text"
                        v-model="basicContent.address"
                        placeholder="账号地址"
                      ></b-form-input>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-lg-6">
                    <div class="form-group">
                      <label for="price">账号分类</label>
                      <multiselect
                        v-model="value2"
                        :options="options2"
                        placeholder="请选择账号类型"
                      ></multiselect>
                    </div>
                  </div>
                  <div class="col-lg-6">
                    <div class="form-group">
                      <label for="manufacturerbrand">客户指定采集</label>
                      <b-form-input
                        for="text"
                        v-model="basicContent.specifyAcquisition"
                        placeholder="客户指定采集(可选项，如有请填写)"
                      ></b-form-input>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="price">文章数</label>
                      <b-form-input
                        for="text"
                        v-model="basicContent.articlesNum"
                        placeholder="文章数"
                      ></b-form-input>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="manufacturerbrand">点赞数</label>
                      <b-form-input
                        for="text"
                        v-model="basicContent.likesNum"
                        placeholder="点赞数"
                      ></b-form-input>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label for="price">粉丝数</label>
                      <b-form-input
                        for="text"
                        v-model="basicContent.fansNum"
                        placeholder="粉丝数"
                      ></b-form-input>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="radio_">
                    <el-radio v-model="radio" label="1">有平台认证</el-radio>
                    <el-radio v-model="radio" label="2">无平台认证</el-radio>
                  </div>
                </div>
                <div class="form-group">
                  <label for="productdesc">自媒体账号简介</label>
                  <textarea
                    v-model="basicContent.textarea"
                    class="form-control"
                    name="textarea"
                    rows="6"
                    placeholder="自媒体账号简介"
                  ></textarea>
                </div>
              </div>
              <div class="form-group mb-0">
                <div style="width: 400px; margin: 0 auto">
                  <b-button
                    class="btn btn-primary"
                    variant="success"
                    @click="makeToast"
                    >提交账号</b-button
                  >
                  <button class="btn btn-primary" style="float: right">
                    继续创建
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
  
</template>
<script>
import Layout from "../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";
import { required, minLength } from "vuelidate/lib/validators";
import Multiselect from "vue-multiselect";
export default {
  validations: {
    basicContent: {
      name: { required, minLength: minLength(6) },
      address: { required },
    },
    value1: { required },
  },
  components: {
    Layout,
    PageHeaderNew,
    Multiselect,
  },
  data () {
    return {
      items: [
        {
          text: "数据采集",
          url: "/spider",
        },{
          text: "添加自媒体号",
          url: "/",
        }
      ],
      submit: false,
      // 下拉框选项
      options1: ["微信公众号", "新浪微博", "搜狐", "一点资讯", "腾讯新闻"],
      options2: ["娱乐", "体育", "财经"],
      value1: null,
      value2: null,
      radio: "1",
      // 基本信息
      basicContent: {
        name: "",
        accountID: "",
        address: "",
        specifyAcquisition: "",
        articlesNum: "",
        likesNum: "",
        fansNum: "",
        textarea: "",
      },
    }
  },
  methods: {
    makeToast() {
      this.$router.push('/spider')
    },
  },
}
</script>
<style lang="scss" scoped>
label{
  font-weight: normal;
}
.radio_{
  padding: 0 12px;
  margin-bottom: .5rem;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
    border-color: #5664d2;
    background: #5664d2;
}
::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: #5664d2;
}
</style>
